<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./../template/WorkspaceTemplate.xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:c="http://java.sun.com/jsp/jstl/core">

    <ui:define name="top">

    </ui:define>

    <ui:define name="left">

    </ui:define>

    <ui:define name="right">

    </ui:define>

    <ui:define name="content">
        <style>
            #updateForm .ui-datatable table {
                border-collapse: collapse;
                width: 100%;
                border-color: grey;
            }
            #updateForm .ui-datatable .ui-datatable-header, .ui-datatable .ui-datatable-footer {
                text-align: center;
                padding: 4px 10px 4px 160px;
            }
            #updateForm .ui-inputfield, .ui-widget-content .ui-inputfield, .ui-widget-header .ui-inputfield {
                width: 60px;
            }
        </style>
        <h:form id="mrpInfoForm">
            <p:panel header="Material Requiements Planning Basic Information">
                <p:messages showDetail="true"/>
                <h:panelGrid columns="4">
                    <h:outputLabel style="font-weight: bold" value="Date Created: "/>
                    <h:outputText value="#{mrpMrpManagerBean.newMRPs.get(0).getFormattedDay()}"/>
                    <h:outputText value=""/>
                    <h:outputText value=""/>

                    <h:outputLabel style="font-weight: bold" value="Planned Period: "/>
                    <h:outputText value="#{mrpMrpManagerBean.newMRPs.get(0).getMRPPeriod()}"/>
                    <h:outputText value=""/>
                    <h:outputText value=""/>

                </h:panelGrid>
                <p:commandButton value="Save" ajax="false" action="#{mrpMrpManagerBean.confirmMrp}"/>
                <p:ajaxStatus style="width: 16px;height: 16px;">
                    <f:facet name="start">
                        <h:graphicImage value="./../images/ajaxloading.gif"/>
                    </f:facet>
                    <f:facet name="complete">
                        <h:outputText value=""/>
                    </f:facet>
                </p:ajaxStatus>
            </p:panel>
        </h:form>
        <br/>
        <br/>

        <h:form id="allMaterial">
            <p:panel header="Options" >
                <p:commandButton value="Auto Fill" ajax="true" update="updateForm,allMaterial,mrpInfoForm" actionListener="#{mrpMrpManagerBean.autoOptimization}"/>
                <p:commandButton value="Auto Optimization" ajax="true" update="updateForm,allMaterial,mrpInfoForm" actionListener="#{mrpMrpManagerBean.autoOptimizationWSafetyStock}"/>
            </p:panel>
            <p:dataTable value="#{mrpMrpManagerBean.newMRPs}" var="mrp">
                <p:column headerText="Material Name">
                    <h:outputText value="#{mrp.bom.material.name}"/>
                </p:column>

                <p:column headerText="Options">
                    <p:commandButton ajax="true" action="#{mrpMrpManagerBean.selectMrpId(mrp)}"
                                     image="ui-icon ui-icon-search" update="updateForm" onsuccess="updateVerDlg.show()"/>
                </p:column>
            </p:dataTable> 
        </h:form>

        <p:dialog widgetVar="updateVerDlg" id="updateVerDialog" hideEffect="explode" showEffect="explode" width="750" header="Material Requiements Planning">
            <h:form id="updateForm">
                <p:messages showDetail="true"/>
                <p:commandButton value="Auto Fill" ajax="true" update="updateForm" actionListener="#{mrpMrpManagerBean.autoOptimizationIndiv}"/>
                <p:commandButton value="Auto Optimizatin" ajax="true" update="updateForm" actionListener="#{mrpMrpManagerBean.autoOptimizationIndivWSafetyStock}"/>
                <p:commandButton value="Calculate" ajax="true" update="updateForm" oncomplete="handleMrpRequest(xhr, status, args)" actionListener="#{mrpMrpManagerBean.calculateMRP}"/>
                <p:commandButton value="OK" onclick="updateVerDlg.hide()"/>
                <div class="ui-datatable ui-widget">
                    <table border="1" summary="for all products">
                        <caption>
                            <div class="ui-datatable-header ui-widget-header ui-corner-tl ui-corner-tr">
                                Material Requirements Planning
                            </div>
                        </caption>

                        <tbody class="ui-datatable-data">
                            <tr>
                                <th class="ui-state-default"><h:outputText value="#{mrpMrpManagerBean.selectedMRP.bom.material.name}"/></th>
                                <th class="ui-state-default" colspan="2"><h:outputText value="Lead time = #{mrpMrpManagerBean.selectedMRP.bom.material.leadtime} weeks"/></th>
                                <th class="ui-state-default" colspan="2"><h:outputText value="Lot size = #{mrpMrpManagerBean.selectedMRP.bom.material.lotSize} kg"/></th>
                                <th class="ui-state-default" colspan="3"><h:outputText value="Order frequency : weekly"/></th>
                            </tr>

                            <tr>
                                <th class="ui-state-default" colspan="3"><h:outputText value="#{mrpMrpManagerBean.getMonthEnglish(mrpMrpManagerBean.selectedMRP.startPeriodMonth)}"/></th>
                                <th class="ui-state-default">Week 1</th>
                                <th class="ui-state-default">Week 2</th>
                                <th class="ui-state-default">Week 3</th>
                                <th class="ui-state-default">Week 4</th>
                                <th class="ui-state-default">Week 5</th>
                            </tr>

                            <tr>
                                <th class="ui-state-default" rowspan="5">MPS (cases)</th>
                            </tr>

                            <c:forEach items="#{mrpMrpManagerBean.counterForProduct}" var="product">
                                <tr>
                                    <th class="ui-state-default" colspan="2"><h:outputText value="#{mrpMrpManagerBean.returnProductName(product)}"/></th>
                                    <c:forEach items="#{mrpMrpManagerBean.counterForWeek}" var="day">
                                        <td>
                                            <h:outputText value="#{mrpMrpManagerBean.weeklyDemands.get(product).get(day)}" rendered="#{mrpMrpManagerBean.renderCell(day)}"/>
                                            <h:outputText value="" rendered="#{!mrpMrpManagerBean.renderCell(day)}"/>
                                        </td>
                                    </c:forEach>
                                </tr>
                            </c:forEach>

                            <tr>
                                <th class="ui-state-default" rowspan="5">MRP (kg)</th>
                            </tr>

                            <c:forEach items="#{mrpMrpManagerBean.counterForProduct}" var="product">
                                <tr>
                                    <th class="ui-state-default" colspan="2"><h:outputText value="#{mrpMrpManagerBean.returnProductName(product)}"/></th>
                                    <c:forEach items="#{mrpMrpManagerBean.counterForWeek}" var="day">
                                        <td><h:outputText value="#{mrpMrpManagerBean.returnKG(mrpMrpManagerBean.weeklyDemands.get(product).get(day), product)}"
                                                          rendered="#{mrpMrpManagerBean.renderCell(day)}">
                                                <f:convertNumber pattern="#.##"/>
                                            </h:outputText>
                                            <h:outputText value="" rendered="#{!mrpMrpManagerBean.renderCell(day)}"/>
                                        </td>
                                    </c:forEach>
                                </tr>
                            </c:forEach>

                            <tr>
                                <th class="ui-state-default" colspan="3">Gross Requirements (kg)</th>
                                <c:forEach items="#{mrpMrpManagerBean.counterForWeek}" var="day">
                                    <td><h:outputText value="#{mrpMrpManagerBean.returnGrossRequirements(day)}" 
                                                      rendered="#{mrpMrpManagerBean.renderCell(day)}"/>
                                        <h:outputText value="" rendered="#{!mrpMrpManagerBean.renderCell(day)}"/>
                                    </td>
                                </c:forEach>
                            </tr>

                            <tr>
                                <th class="ui-state-default" colspan="3">Planned Receipts (kg)</th>
                                <c:forEach items="#{mrpMrpManagerBean.counterForWeek}" var="day">
                                    <td><h:outputText value="#{mrpMrpManagerBean.plannedReceiptsList.get(day)}"
                                                      rendered="#{mrpMrpManagerBean.renderCell(day)}"/>
                                        <h:outputText value="" rendered="#{!mrpMrpManagerBean.renderCell(day)}"/>
                                    </td>
                                </c:forEach>
                            </tr>

                            <tr>
                                <th class="ui-state-default" colspan="3">number of Lots</th>
                                <c:forEach items="#{mrpMrpManagerBean.counterForWeek}" var="day">
                                    <td><p:inputText value="#{mrpMrpManagerBean.inputLotNumbers.get(day).l}"
                                                     required="true" requiredMessage="Please input number of lots."
                                                     rendered="#{mrpMrpManagerBean.renderCell(day)}"/>
                                        <h:outputText value="" rendered="#{!mrpMrpManagerBean.renderCell(day)}"/>
                                    </td>
                                </c:forEach>
                            </tr>

                            <tr>
                                <th class="ui-state-default" colspan="2">Planned Inventory</th>
                                <td><h:outputText value="#{mrpMrpManagerBean.plannedInventory.get(0)}"/></td>
                                <c:forEach items="#{mrpMrpManagerBean.counterForWeek}" var="day">
                                    <td><h:outputText value="#{mrpMrpManagerBean.plannedInventory.get(day+1)}" 
                                                      rendered="#{mrpMrpManagerBean.renderCell(day)}"/>
                                        <h:outputText value="" rendered="#{!mrpMrpManagerBean.renderCell(day)}"/></td>
                                </c:forEach>
                            </tr>

                        </tbody>
                    </table>
                </div>
            </h:form>
            <script type="text/javascript">
                function handleMrpRequest(xhr, status, args) {  
                    if(args.validationFailed || !args.isValid) {  
                        jQuery('#updateVerDialog').parent().effect("shake", { times:3 }, 100);  
                    } else {  
//                        updateVerDlg.hide();  
                    }  
                }  
            </script>
        </p:dialog>
    </ui:define>

    <ui:define name="bottom">

    </ui:define>

</ui:composition>
